<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>插入视频</title>
    <script src="//code.jquery.com/jquery-1.11.3.js"></script>
    <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
    <style type="text/css">
        body {
            margin: 0px;
        }

        /*.vjs-tech {
            pointer-events: none;
        }*/

        /*.video-js .vjs-big-play-button {
            font-size: 2.5em;
            line-height: 2.3em;
            height: 2.5em;
            width: 2.5em;
            -webkit-border-radius: 2.5em;
            -moz-border-radius: 2.5em;
            border-radius: 2.5em;
            background-color: #73859f;
            background-color: transparent;

            margin-top: -1.2em;
            margin-left: -1em;
        }

        !* 中间的播放箭头 *!
        .vjs-big-play-button .vjs-icon-placeholder {
            font-size: 1.63em;
        }

        !* 加载圆圈 *!
        .vjs-loading-spinner {
            font-size: 2.5em;
            width: 2em;
            height: 2em;
            border-radius: 1em;
            margin-top: -1em;
            margin-left: -1.5em;
        }*/
    </style>
</head>
<body>
<div class="videoContainer">

</div>

<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
<script type="text/javascript">
    $(function () {
        var storage = localStorage;
        var id = getParameter('id');
        var videoData = storage.getItem("video_" + id) || "";
        if (videoData != "") {
            videoData = JSON.parse(videoData);
        } else {
            $.ajaxSettings.async = false;
            $.get("/web/file/video/getPreviewData.do", {id: id}, function (res) {
                if (res.success) {
                    videoData = {
                        "path": res.data.path,
                        "posterUrl": res.data.posterUrl
                    }
                    storage.setItem("video_" + id, JSON.stringify(videoData));
                }
            })
            $.ajaxSettings.async = true;
        }

        var str = '<video id="video1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" x5-playsinline="" playsinline="" webkit-playsinline="" poster="' + videoData.posterUrl + '">' +
            '<source src="' + videoData.path + '" type="video/mp4"></source>' +
            '</video>'
        $(".videoContainer").append(str);

        var imgTextContentLength = $('.img-text-content', parent.document).length; // pc详情显示的元素
        var mTextBoxLength = $('.m-text-box', parent.document).length; // h5详情显示的元素

        var width = 0, height = 0;
        var videoIframeLength = $('.video_iframe', parent.document).length;
        if (imgTextContentLength == 1 || mTextBoxLength == 1 || videoIframeLength == 1) {
            width = $($('.video_iframe', parent.document)[0]).width();
            height = $($('.video_iframe', parent.document)[0]).height();
        } else {
            var data = {};
            for (var i = 0; i < videoIframeLength; i++) {
                var width1 = $($('.video_iframe', parent.document)[i]).width();
                var height1 = $($('.video_iframe', parent.document)[i]).height();
                var path = $($('.video_iframe', parent.document)[i]).attr('data-path');
                data[path] = {};
                data[path].width = width1;
                data[path].height = height1;
            }
            width = data[videoData.path].width;
            height = data[videoData.path].height;
        }
        videojs('video1', {
            controls: true,
            width: width,
            height: height
        });
    });

    function getParameter(key) {
        var url = window.document.location.search;
        var rs = new RegExp('(^|)' + key + '=([^&]*)(&|$)', 'g').exec(url);
        return rs ? (decodeURIComponent(rs[2]) || '') : ''
    }
</script>
</body>
</html>